import React, { Component } from "react";
import PubSub from "pubsub-js";
import styles from "./index.css";

export default class Header extends Component {
  search = async () => {
    PubSub.publish("search");

    const {
      keyWordEl: { value },
    } = this;
    //  axios.get(`https://api.github.com/search/users?q=${value}`).then(
    //   response=>{
    //     let {items } = response.data
    //     PubSub.publish('search',items)
    //   },
    //   error=>{console.log(error)}
    //  )
    // fetch(`https://api.github.com/search/users?q=${value}`).then(
    //   response=>{
    //     console.log('connect success!',response)
    //     return response.json()
    //   },
    //   error=>{
    //     console.log('connect fail !',error)
    //   }
    // ).then(
    //   response=>{console.log('获取数据成功',response)}
    // )

    try {
      const response = await fetch(
        `https://api.github.com/search/users?q=${value}`
      );

      const data = await response.json();
      PubSub.publish("search", data.items);
    } catch (error) {
      console.log("connect fail !", error);
    }
  };
  render() {
    return (
      <div className={styles.header}>
        <h1>根据名字搜索github用户信息</h1>
        <div>
          <input
            ref={(c) => (this.keyWordEl = c)}
            type="text"
            placeholder="输入关键词搜索"
          />
          <button onClick={this.search}>搜索</button>
        </div>
      </div>
    );
  }
}
